<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
				ul,li{
					list-style: none;
				}
			#content_bg{
				display: none; 
				width: 100%;
			}
			#content_bg>ul{
				justify-content: space-around;
				display: flex;
			}
			#content_bg>ul li img{
				width: 300px;
				height: 200px;
				
			}
			
			#bg_0{
				
				position: relative;
				width: 100%;
				height: 100%;
			}
			#bg_0>ul li img{
				width: 100%;
				height: 100%;
				display: none;
				
			}
			button{
				position: absolute;
				top: 20px;
				left: 20px;
				}
				
			.active{
				display: block;
			}
			
		</style>
	</head>
	<body>
	<div id="bg_">
		<div id="content_bg">
			<ul>
				<li><img id="q1" src="../images/1.jpg" ></li>
				<li><img id="q2" src="../images/2.jpg" /></li>
				<li><img  id="q3"src=" ../images/3.jpg" ></li>
				
			</ul>
			
		</div>
		
		
		<div id="bg_0">
			<button id="btn" type="button">换肤</button>
			<ul >
				<li><img id="img1" src="../images/1.jpg" ></li>
				<li><img id="img2" src="../images/2.jpg" /></li>
				<li><img id="img3" src="../images/3.jpg" ></li>
			</ul>
			
		</div>
		</div>
	
	
	<script type="text/javascript">
		var btn=document.querySelector('#btn');
		var list=document.getElementsByTagName('li');
		var img1=document.querySelector('#img1');
		var img2=document.querySelector('#img2');
		var img3=document.querySelector('#img3');
		var q1=document.querySelector('#q1');
		var q2=document.querySelector('#q2');
		var q3=document.querySelector('#q3');
		var bg_=document.querySelector('#bg_');
		var content_bg=document.querySelector('#content_bg');
		bg_.onclick=function(e){
			// console.log(e.target)
			if(e.target.innerHTML==='换肤'){
				content_bg.style.display='block'
				
			}
			if(e.target.id==='q1'){
				console.log(e.target)
				img1.style.display='block';
				content_bg.style.display='none'
			}else if(e.target.id==='q2'){
				img2.style.display='block';
				img1.style.display='none';
				content_bg.style.display='none'
				}else if(e.target.id==='q3'){
				img3.style.display='block';
				img1.style.display='none';
				img2.style.display='none';
				content_bg.style.display='none'
				}
			
		}
		
	</script>
	</body>
</html>
